import React, { useRef, useState } from "react";
import { useBoolean, useRequest } from "ahooks";
import style from "./style.module.scss";
import { getConsumptionFormatText, getConsumptionFormatText1 } from "../../../../utils/formatType";
import { MyNavBar } from "../../../../components";
import { useNavigate } from "react-router-dom";
import { dateFormat } from "../../../../utils/formatTime";
import { getRecordList, getUserWallet } from "../../../../api/wallet";
import { List } from "react-vant";

// 收支记录类型
interface RecordListState {
  money: number;
  direction: number;
  incomeType: number;
  recordTime: string;
}

// 钱包余额类型
export interface WalletDataState {
  id: number;
  doctorId: number;
  balance: number;
  version: number;
  whetherBindIdCard: number;
  whetherBindBankCard: number;
}

interface WalletRawState {
  balance: number;
  doctorId: number;
  id: number;
  version: number;
  whetherBindBankCard: number;
  whetherBindIdCard: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();

  // 钱包请求hooks
  // const walletData = 29870;
  const {
    data: walletData = {
      id: 0,
      doctorId: 0,
      balance: 0,
      version: 0,
      whetherBindIdCard: 0,
      whetherBindBankCard: 0,
    },
  } = useRequest<WalletDataState, []>(async () => {
    const resp = await getUserWallet();

    return resp.result;
  });
  console.log("walletData", walletData);

  // 查询用户消费记录接口参数
  const recordParams = useRef({
    page: 1,
    count: 10,
  });
  // 用户消费记录请求hooks
  // const { data: RecordData = [] } = useRequest<RecordListState[], []>(
  //   async () => {
  //     const resp = await getRecordList(recordParams.current);
  //     return resp.result;
  //   }
  // );

  const [RecordData, setRecordData] = useState<RecordListState[]>([]);
  // 是否加载完毕
  const [finish, { setTrue, setFalse }] = useBoolean(false);

  const onloadRecordData = async () => {
    const resp = await getRecordList(recordParams.current);
    // 是否存在更多数据
    if (resp.result.length) {
      // 第1页不做合并
      if (recordParams.current.page === 1) {
        setRecordData(resp.result);
      } else {
        setRecordData([...RecordData, ...resp.result]);
      }

      // 请求页码+1
      recordParams.current.page++;
      setFalse();
    } else {
      setTrue();
    }
  };

  return (
    <div className={style.wallet}>
      {/* 导航栏 */}
      <MyNavBar
        title="我的钱包"
        theme="black"
        style={{ background: "#fff" }}
        rightText={
          <div
            className={style.tobind}
            onClick={() => navigate("/my/wallet/bind/information")}
          >
            去绑定
          </div>
        }
        onClickLeft={() => {
          navigate(-1);
        }}
      ></MyNavBar>
      {/* 顶部钱包-余额-操作 */}
      <div className={style.myWallet}>
        {/* 钱包 */}
        <div className={style["myWallet-wrapper"]}>
          <div className={style["myWallet-content"]}>
            <div className={style["myWallet-tit"]}>我的H币</div>
            <div className={style["myWallet-price"]}>{walletData.balance}</div>
            <div className={style["myWallet-withdraw"]}>
              <div>(满20000时可提现)</div>
              <button onClick={() => navigate("/my/wallet/withdrawal")}>
                提现
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 底部-消费记录 */}
      <div className={style.consumption}>
        <div className={style.recordList}>
          <List onLoad={onloadRecordData} finished={finish}>
            <ul>
              {RecordData.map((item, index) => {
                return (
                  <li key={item.recordTime + index}>
                    <div className={style["recordList-left"]}>
                      <b>{getConsumptionFormatText1(item.incomeType)}</b>
                      <span>{dateFormat(item.recordTime, "yyyy.MM.dd")}</span>
                    </div>
                    <div className={style["recordList-right"]}>
                      <b
                        style={{
                          color: item.direction === 1 ? "#d92109" : "#3087ea",
                        }}
                      >
                        {item.direction === 1 ? "+" : ""}
                        {item.money}
                        H币
                      </b>
                    </div>
                  </li>
                );
              })}
            </ul>
          </List>
        </div>
      </div>
    </div>
  );
};

export default Index;
